<template>
  <div class="chart_card">
    <div class="chart-header">
      <span class="title">学生走向</span>
      <span class="unit">单位/人</span>
    </div>
    <div class="chart-content">
      <div ref="chart" class="chart_container"></div>
      <div class="data-summary">
        <div class="summary-item bor">
          <div class="label">以往年度累计总人数</div>
          <div class="value">{{ totalAllNum }}</div>
        </div>
        <div class="summary-item">
          <div class="label">上一年度人数</div>
          <div class="value">{{ totalUpNum }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { transport } from "@/api/statistics";
export default {
  name: "StudentTrendChart",
  data() {
    return {
      chart: null,
      chartData: {
        xAxis: [
          "省队(一线)",
          "省队体校(二线)",
          "上一级体校(三线)",
          "体育院校",
          "普通院校",
          "高校高水平运动队",
          "部队体工队",
          "就业",
          "其他"
        ],
        series: [
          {
            name: "以往年度累计人数",
            data: [100, 780, 680, 780, 500, 580, 680, 200, 900],
            type: "line",
            smooth: true,
            areaStyle: {
              opacity: 0.3,
              color: "#409EFF"
            },
            lineStyle: {
              width: 2,
              color: "#409EFF"
            },
            itemStyle: {
              color: "#409EFF"
            }
          },
          {
            name: "上一年度人数",
            data: [300, 350, 300, 200, 600, 500, 400, 300, 1000],
            type: "line",
            smooth: true,
            areaStyle: {
              opacity: 0.3,
              color: "#67C23A"
            },
            lineStyle: {
              width: 2,
              color: "#67C23A"
            },
            itemStyle: {
              color: "#67C23A"
            }
          }
        ]
      },
      totalAllNum: 0,
      totalUpNum: 0
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    async initChart() {
      let res = await transport();
      this.chartData.series[0].data = res.data.allNumList;
      this.chartData.series[1].data = res.data.upNumList;
      this.totalAllNum = res.data.totalAllNum;
      this.totalUpNum = res.data.totalUpNum;

      this.chart = echarts.init(this.$refs.chart);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: ["以往年度累计人数", "上一年度人数"],
          top: 0,
          right: 0
        },
        grid: {
          left: "0",
          right: "0",
          bottom: "3%",
          top: "40px",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.chartData.xAxis,
          axisLabel: {
            interval: 0
          }
        },
        yAxis: {
          type: "value",
          name: "人数",
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          }
        },
        series: this.chartData.series
      };
      this.chart.setOption(option);
      // 监听父元素大小变化
      const ro = new ResizeObserver(entries => {
        for (let entry of entries) {
          const cr = entry.contentRect;
          if (this.chart) {
            this.chart.resize();
          }
        }
      });
      ro.observe(this.$refs.chart);
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  }
};
</script>

<style scoped>
.chart_card {
  height: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

.chart-header {
  display: flex;
  align-items: center;
}

.title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.unit {
  font-size: 12px;
  color: #909399;
  margin-left: 8px;
}

.chart_container {
  width: 100%;
  height: 250px;
}

.data-summary {
  display: flex;
  margin-top: 20px;
}

.summary-item {
  text-align: start;
  width: 50%;
  background-color: #f5f7fa;
  padding: 10px;
}

.bor {
  border-right: 1px dashed #cccccc;
}

.summary-item .label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.summary-item .value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}
</style>
